<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>用户中心-KuangStudy</title>
	<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
	<style>
		#table-title tr th {
			border: none;
		}
	</style>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body style="background: #f2f2f2;">

<div th:replace="~{common/header::header(activeUrl='user')}"></div>

<main role="main" class="container">
	<div class="row" id="app">

		<aside class="col-md-3 blog-sidebar" id="userShowPanel" th:fragment="userShowPanel">

			<div class="p-4 my-3 bg-white rounded">
				<div class="mb-0">
					<p class="text-center">
						<img style="border-radius: 50%" th:src="${session.loginUser.getAvatar()}" width="128"
						     height="128">
					</p>
					<div class="text-center">
						<span th:text="${session.loginUser.getUsername()}"></span>
						<br>
						<small>
							<span class="badge badge-primary" th:if="${session.loginUser.getRoleId() == 2}">普通用户</span>
							<span class="badge badge-danger" th:if="${session.loginUser.getRoleId() == 1}">
	                            vip用户
                            </span>
						</small>
						<p class="text-center">
							<small></small>
						</p>
						<p>
                            <span

		                            class="badge badge-light mr-1"></span>
						</p>
						<p>
							<button type="button" onclick="donate()" class="btn btn-outline-primary btn-sm btn-block">
								赞助服务器
							</button>
						</p>
						<span v-text="userInfo.nickname"></span>
						<br>
						<span class="badge badge-light mr-1" v-for="(v,k) in userInfo.hobby" :key="k" v-text="v"></span>
						<p>
						<table class="table">
							<thead id="table-title">
							<tr>
								<th scope="col">博客</th>
								<th scope="col">问题</th>
								<th scope="col">回复</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td v-text="userInfo.blogCount">0</td>
								<td v-text="userInfo.questionCount">0</td>
								<td v-text="userInfo.commentCount">0</td>
							</tr>
							</tbody>
						</table>
						</p>
					</div>
				</div>
			</div>
		</aside>

		<div class="col-md-9 blog-main">

			<div class="my-3 p-3 bg-white rounded shadow-sm">

				<h6 class="border-bottom border-gray pb-2 mb-0">
					<nav class="nav nav-pills">
						<a style="cursor:pointer" :class="active == 1?'nav-link active':'nav-link'" @click="blog()"
						>
							<svg class="bi bi-receipt-cutoff" width="1em" height="1em" viewBox="0 0 16 16"
							     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd"
								      d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v13h-1V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51L2 2.118V15H1V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zM0 15.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"/>
								<path fill-rule="evenodd"
								      d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-8a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
							</svg>
							博客
						</a>
						<a style="cursor:pointer" :class="active == 2?'nav-link active':'nav-link'" @click="QA()"
						>
							<svg class="bi bi-question-square" width="1em" height="1em" viewBox="0 0 16 16"
							     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd"
								      d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
								<path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
							</svg>
							问答
						</a>
						<a style="cursor:pointer" class="nav-link" :class="active == 3?'nav-link active':'nav-link'"
						   @click="Reply()"
						>
							<svg class="bi bi-chat-dots" width="1em" height="1em" viewBox="0 0 16 16"
							     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd"
								      d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
								<path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
							</svg>
							回复
						</a>

					</nav>
				</h6>

				<div @click="toBlog(list.bid)" style="cursor:pointer" v-for="(list,k) in blogList" :key="list.bid" v-show="active == 1" class="media text-muted pt-3">
					<!-- 头像 -->
					<img :src="list.authorAvatar" style="border-radius: 5px " width="32"
					     height="32">
					<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
						{{list.title}}
						<a

								class="text-dark font-weight-bold text-decoration-none d-block">
						</a>
						<!-- 浏览量 -->
						<span>
                            <svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg">
                              <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                              <path fill-rule="evenodd"
                                    d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                            </svg>
                        </span>
						{{list.views}}
						<!-- 时间 -->
						<span class="badge badge-pill badge-primary mr-1">{{list.categoryName}}</span>
						<span
								class="badge badge-light float-right">
	                        	                    {{list.gmtCreate | msgFormat}}
                        </span>
					</p>
				</div>

				<div @click="toQuesstion(list.qid)" style="cursor:pointer" v-for="(list,v) in questionInfo.questionList"
				     :key="list.qid" v-show="active == 2" class="media text-muted pt-3">
					<!-- 头像 -->
					<img :src="list.authorAvatar" style="border-radius: 5px " width="32" height="32">
					<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
						{{list.title}}
						<a

								class="text-dark font-weight-bold text-decoration-none d-block">
						</a>
						<!-- 浏览量 -->
						<span>
                            <svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg">
                              <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                              <path fill-rule="evenodd"
                                    d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                            </svg>
                        </span>
						{{list.views}}
						<!-- 时间 -->

						<span

								class="badge badge-light float-right">
	                        	                    {{list.gmtCreate | msgFormat}}
                        </span>
						<span class="badge badge-pill badge-primary mr-1">{{list.categoryName}}</span>
						<span

								style="margin-right: 20px" @click.stop="solve(list.status,list,v)"	:class="list.status == 0?'badge float-right badge-danger':'badge float-right badge-pill' " v-text="list.status == 0?'未解决':'已解决'">

                        </span>
					</p>

				</div>
				<br>
				<div v-show="active == 3">
					<button  class="btn btn-info" @click="isQuesOrBolg = 1">博客</button>
					|
					<button class="btn btn-success" @click="isQuesOrBolg = 2">问答</button>
				</div>
				<hr v-show="active == 3"/>
				<div  @click="toQuesstion(list.question.qid)" style="cursor:pointer" v-for="(list,k) in comment" :key="k"
				      v-show="active == 3 && isQuesOrBolg == 2" class="media text-muted pt-3">
					<!-- 头像 -->
					<img :src="list.question.authorAvatar" style="border-radius: 5px " width="32" height="32">
					<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
						<!-- 评论内容 -->
						<a
								class="text-dark font-weight-bold text-decoration-none d-block">评论：{{list.content}}</a>
						<!-- 类型 -->
						<span v-text="list.topicCategory==1?'博客':'问答'" class="badge badge-primary">问答</span>
						<!-- 时间 -->
						<span class="badge badge-light">{{list.gmtCreate | msgFormat}}</span>

						<a @click.stop="remComment(list.commentId,v)" class="badge badge-danger float-right"
						   style="color: white">
							删除
						</a>
					</p>
				</div>
				<div  @click="toBlog(list.blog.bid)" style="cursor:pointer" v-for="(list,k) in commpentBlog" :key="list.commentId"
				      v-show="active == 3 && isQuesOrBolg == 1" class="media text-muted pt-3">
					<!-- 头像 -->
					<img :src="list.blog.authorAvatar" style="border-radius: 5px " width="32" height="32">
					<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
						<!-- 评论内容 -->

						<a
								class="text-dark font-weight-bold text-decoration-none d-block">评论：{{list.content}}</a>
						<!-- 类型 -->
						<span v-text="list.topicCategory==1?'博客':'问答'" class="badge badge-primary">问答</span>
						<!-- 时间 -->
						<span class="badge badge-light">{{list.gmtCreate | msgFormat}}</span>

						<a @click.stop="remComment(list.commentId,v)" class="badge badge-danger float-right"
						   style="color: white">
							删除
						</a>
					</p>
				</div>
			</div>
		</div>
	</div>
</main>


<div th:replace="~{common/footer::footer}"></div>

<a class="to-top">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>

<!-- layer 赞赏码 -->
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:inline="javascript">

    let vm = new Vue({
        el: '#app',
        data: {
            userInfo: {},
            active: 1,
            questionInfo: {},
            comment: {},
            isQuesOrBolg: 1,
            blogList: {},
            commpentBlog: {}
        },
        mounted() {
            // 问答获取评论信息
            axios({
                url: '/comment/userInfo',
                method: "POST"
            }).then((resp) => {
                this.comment = resp.data
            })
            // 获取博客评论
            axios({
                url: '/comment/blogInfo',
                method: "POST"
            }).then((resp)=>{
                this.commpentBlog = resp.data;
            })
            // 获取博客信息
            axios({
                url: "/blog/blogList",
                method: "POST"
            }).then((resp)=>{
                this.blogList = resp.data;
            })
        },
        methods: {
            solve(status,list,v){
                if(status == '1'){
                    return;
                }
                if(window.confirm("是否解决该问题?")){
                    list.status = 1;
                    this.questionInfo.questionList.splice(v,1,list);
                    axios({
                        url: "/question/solve/"+list.qid,
                        method: "POST"
                    })
                }
            },
            toBlog(bid){
                window.location.href = "/blog/read/" + bid;
            },
            remComment(cid, index) {
                if (!confirm('你确认要删除吗？')) return false;
                axios({
                    url: "/comment/delComment/" + cid,
                    method: "POST",
                }).then((resp) => {
                    const code = resp.data.code;
                    if (code == 20000) {
                        alert("删除成功！")
                        // vue 删除数据
                        this.commpentBlog.splice(index, 1);
                        axios({

                        });
                    } else {
                        alert("请重新尝试!")
                    }

                })
            },
            toQuesstion(qid) {
                window.location.href = "/question/read/" + qid;
            }
            ,
            findQuestionList() {
                axios({
                    url: "/question/currentUserInfo",
                    method: "POST"
                }).then((resp) => {
                    this.questionInfo = resp.data.data;
                })
            },
            blog() {
                if (this.active == 1) {
                    return;
                }
                this.active = 1;

            },
            QA() {
                if (this.active == 2) {
                    return;
                }
                this.active = 2;

            },
            Reply() {
                if (this.active == 3) {
                    return;
                }
                this.active = 3;

            }
        }
    })

    function hq() {
        axios({
            url: "/userinfo/information",
            method: 'get'
        }).then(function (resp) {
            let data = resp.data.data;
            console.log(data);
            vm.userInfo = data;
        })
        // 获取当前用户
        axios({
            url: "/question/currentUserInfo",
            method: "POST"
        }).then((resp) => {
            vm.questionInfo = resp.data.data;
        })
    }

    hq();


    Vue.filter('msgFormat', function (msg) {
        // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
        return moment(msg).format('YYYY-MM-DD');
    })


</script>

</body>
</html>
